<script setup lang="ts">
  import { Ref, ref } from 'vue';
  import { FormInstance, Message } from '@arco-design/web-vue';
  import { LinksRecord } from '@/api/links/types';
  import { createLinks, editLinks, getLinksDetail } from '@/api/links';

  const emit = defineEmits(['saveSuccess']);
  const dialogVisiable = ref(false);
  const addForm: Ref<LinksRecord> = ref({
    id: 0,
    name: '',
    url: '',
    logo: '',
    description: '',
    category: 'OTHER',
    status: '0',
    sort: 0,
    views: 0,
    createTime: '',
    updateTime: '',
  });

  const formRules: FormInstance['rules'] = {
    name: [{ required: true, message: '链接名称不能为空' }],
    url: [{ required: true, message: '链接地址不能为空' }],
    category: [{ required: true, message: '分类不能为空' }],
  };

  const categoryOptions = [
    { label: '技术博客', value: 'TECH' },
    { label: '生活博客', value: 'LIFE' },
    { label: '资源网站', value: 'RESOURCE' },
    { label: '其他', value: 'OTHER' },
  ];

  const formRef = ref();
  const saveId = ref();

  // 保存
  const handleSave = async () => {
    try {
      const isInvalid = await formRef.value?.validate();
      if (isInvalid) return false;

      // 保存和编辑
      if (saveId.value) {
        await editLinks(addForm.value);
      } else {
        delete addForm.value.id;
        await createLinks(addForm.value);
      }

      // 关闭对话框
      dialogVisiable.value = false;
      emit('saveSuccess');
      Message.success('保存成功');
      return true;
    } catch (error) {
      return false;
    }
  };

  const handleOpen = async () => {
    dialogVisiable.value = true;
  };

  // 编辑
  const handleEdit = async (id: number) => {
    dialogVisiable.value = true;
    saveId.value = id;
    const result = await getLinksDetail(id);
    addForm.value = result.data;
  };

  // 点击关闭-取消按钮后触发
  const handleCancel = () => {
    dialogVisiable.value = false;
  };

  // 对话框关闭后触发
  const handleClose = () => {
    // 重置表单
    addForm.value = {
      id: 0,
      name: '',
      url: '',
      logo: '',
      description: '',
      category: 'OTHER',
      status: '0',
      sort: 0,
      views: 0,
      createTime: '',
      updateTime: '',
    };
    saveId.value = undefined;
  };

  // 暴露方法
  defineExpose({
    handleOpen,
    handleEdit,
  });
</script>

<template>
  <a-modal
    :visible="dialogVisiable"
    title-align="start"
    :ok-text="$t('modal.operation.save')"
    :cancel-text="$t('modal.operation.cancel')"
    unmount-on-close
    @before-ok="handleSave"
    @close="handleClose"
    @cancel="handleCancel"
  >
    <template #title
      >{{
        saveId
          ? $t('searchTable.operation.edit')
          : $t('searchTable.operation.create')
      }}
    </template>
    <a-form ref="formRef" :rules="formRules" :model="addForm" auto-label-width>
      <a-form-item field="name" label="链接名称">
        <a-input
          v-model="addForm.name"
          allow-clear
          placeholder="请输入链接名称"
        />
      </a-form-item>
      <a-form-item field="url" label="链接地址">
        <a-input
          v-model="addForm.url"
          allow-clear
          placeholder="请输入链接地址"
        />
      </a-form-item>
      <a-form-item field="logo" label="Logo地址">
        <a-input
          v-model="addForm.logo"
          allow-clear
          placeholder="请输入Logo地址"
        />
      </a-form-item>
      <a-form-item field="category" label="分类">
        <a-select
          v-model="addForm.category"
          :options="categoryOptions"
          placeholder="请选择分类"
        />
      </a-form-item>
      <a-form-item field="description" label="描述">
        <a-textarea
          v-model="addForm.description"
          placeholder="请输入描述"
          :max-length="200"
          show-word-limit
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
